<template>
  <div class="app-container">
    <comprehensive-table
            @selection-change="selectionChange"
            :columns="column" :data="data" @reset="reset" @onSubmit="onSubmit" @custom-size-change="handleCustomSizeChange" @custom-select-change="handleCustomSelectChange">
      <template v-slot:btn>
       <div style="display: flex;justify-content: flex-end">
         <!-- <el-button type="primary" @click="add"><el-icon><plus /></el-icon> 添加</el-button> -->
         <el-button type="danger" @click="batchDelete"><el-icon><delete /></el-icon>批量删除</el-button>
       </div>
      </template>
      <template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
      <template v-slot:operation="scope">
        <!-- <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="edit(scope.row)"
        >
          编辑
        </el-button> -->
        <el-button
             @click="del(scope.row)"
            type="danger"
            size="small"
            icon="Delete"
        >
          删除
        </el-button>
      </template>
    </comprehensive-table>

    <el-dialog
        :visible.sync="dialogVisible"
            :title="title"
            width="50%"
    >
      <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              :size="formSize"
      >
		<el-form-item label="站点名称" prop="name">
		  <el-input v-model="ruleForm.name" />
		</el-form-item>
		<el-form-item label="地址" prop="address">
		  <el-input v-model="ruleForm.address" />
		</el-form-item>
		<el-form-item label="联系电话" prop="phone">
		  <el-input v-model="ruleForm.phone" />
		</el-form-item>
		<el-upload
		    class="upload-demo"
		    action="/upload"
		    :on-success="handleUploadSuccess"
		    :before-upload="beforeUpload"
		    :on-remove="handleRemove"
		  >
		  <el-button size="small" type="primary">点击上传</el-button>
		</el-upload>
		 <el-form-item label="开门时间" prop="openTime">
	     <el-time-picker
	       v-model="ruleForm.openTime"
	       placeholder="选择开门时间"
	       format="HH:mm:00"
	     ></el-time-picker>
	   </el-form-item>
    <el-form-item label="关门时间" prop="closeTime">
      <el-time-picker
        v-model="ruleForm.closeTime"
        placeholder="选择关门时间"
        format="HH:mm:00"
      ></el-time-picker>
		      </el-form-item>
		<el-form-item label="经度-180~180" prop="lon">
		  <el-input-number v-model="ruleForm.lon" :min="-180" :max="180" :step="0.0001"></el-input-number>
		</el-form-item>
		<el-form-item label="纬度-90~90" prop="lat">
		  <el-input-number v-model="ruleForm.lat" :min="-90" :max="90" :step="0.0001"></el-input-number>
		</el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleClose('ruleFormRef')"
        >确定</el-button
        >
      </span>
      </template>
    </el-dialog>

  </div>
</template>
<script>
	
var dayjs = require('dayjs')
  import ComprehensiveTable from './components/comprehensive.vue'
	import axios from 'axios'
  const data = []
  
  
  const column = [
    { type:'selection', width:60 },
    { name:'id', label: 'id', valueType:'input',width:100, },
		{	name:'name', label: '姓名',	inSearch:true,	valueType:'input',	width:190},
		{	name:'phone', label: '联系号码', inSearch:true, valueType:'input',width:190},
		{	name:'sex', label: '性别',		valueType:'input',	width:130},
		{	name:'storesName', label: '站点',		valueType:'input',	width:220},
		{	name:'departmentName', label: '部门',		valueType:'input',	width:200},
    { name:'operation',slot:true,fixed:'right',width:200 }
  ]
  export default {
    components:{
      ComprehensiveTable
    },
    data(){
      return{
        data,
        column,
        formSize:'default',
        ruleForm:{
          id:null,
					name: '',
					phone:null,
					email:null,
					departmentName:'',
					storesId:'',
					sex: null,
        },
        rules:{
					phone:[
						{ required: true, message: '请输入联系电话', trigger: 'blur' },
						{ pattern: /^\d{11}$/, message: '手机号码必须为11位数字', trigger: 'blur' }
					],
					name:[
						{ required: true, message: '请输入站点名字', trigger: 'blur' },
						{ min: 1, max: 9, message: '名称不能超过9位', trigger: 'blur' },
					]
				},
        dialogVisible:false,
        title:'新增',
        rowObj:{},
        selectObj:[],
				currentPage:1,
				pageSize:10
      }
    },
		created() {
		  this.fetchData();
		},
    methods:{
			fetchData() {
			  axios.get('http://43.136.172.73/api/v1/rider/list', {
					params: {
					  currentPage:this.currentPage,
					  pageSize:this.pageSize,
					},
					headers:{
						Authorization:''
					}
			  })
			  .then(response => {
			    this.data = response.data.data;
					this.data.map(item=>{
						item.sex = item.sex ? "男" : "女" ;	
					})
					console.log(response);
			  })
			  .catch(error => {
			    console.error('Error:', error);
			  });
			},
      async handleClose(formName){
				
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (valid) {
              let obj = {
                ...this.ruleForm,
              }
							console.log(obj);
							
              if(this.title==='新增'){
								
								
              }else {
                this.data.forEach(item=>{
                  if(item.id===this.rowObj.id){
                    item.address=obj.address
                    item.closeTime=obj.closeTime
                    item.name=obj.name
										item.openTime=obj.openTime
										item.phone=obj.phone
										item.lon=obj.lon
										item.lat=obj.lat
										item.images=obj.images
                  }
				    
                });
								// console.log(obj);
								
								
              }
              this.dialogVisible = false
              // console.log('submit!',obj)
            } else {
              console.log('error submit!', fields)
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      add(){
        this.title='新增'
        this.dialogVisible = true
      },
      batchDelete(){
        if(!this.selectObj.length){
          return this.$message.error('未选中任何行')
        }
        this.$confirm(
            '你确定要删除选中项吗?',
            '温馨提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              draggable: true,
            }
        )
            .then(() => {
							console.log(row.id);
							const idArray = [];
							idArray.push(row.id);
							console.log(idArray);
							const url = 'http://43.136.172.73/api/v1/rider/del';
							const headers = {Authorization:'dsa'}
								axios.delete(url, {
								  data: idArray, // 将idArray作为请求体数据
								  headers: {
								    Authorization:'dsa' 
								  },
								}).then(response => {
							    // 处理成功响应
									console.log(response);
									this.$message.success('删除成功')
									this.fetchData()
							  })
							  .catch(error => {
							    // 处理错误
							  })
            })
            .catch(() => {

            })
      },
       selectionChange(val) {
		     console.log('选中项：', val);
					(val)=>emit('comprehensive',val)
         this.selectObj = val;
       },
      edit(row){
        this.title='编辑'
        this.rowObj = row
        this.dialogVisible = true
        this.ruleForm.name = row.name
				this.ruleForm.id = row.id
				this.ruleForm.phone = row.phone
		    this.ruleForm.address = row.address
        this.ruleForm.lon = row.lon
				this.ruleForm.lat = row.lat
				this.ruleForm.openTime = row.openTime
				this.ruleForm.closeTime = row.closeTime
      },
      del(row){
        this.$confirm(
            '你确定要删除当前项吗?',
            '温馨提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              draggable: true,
            }
        )
            .then(() => {
              // console.log(row.id);
							console.log(row.id);
							const idArray = [];
							idArray.push(row.id);
							console.log(idArray);
							const url = 'http://43.136.172.73/api/v1/rider/del';
							const headers = {Authorization:'dsa'}
								axios.delete(url, {
								  data: idArray, // 将idArray作为请求体数据
								  headers: {
								    Authorization:'dsa' 
								  },
								}).then(response => {
							    // 处理成功响应
									console.log(response);
									this.$message.success('删除成功')
									this.fetchData()
							  })
							  .catch(error => {
							    // 处理错误
							  })
            })
            .catch(() => {

            })
      },
      reset(){
        this.$message.success('触发重置方法');
				this.fetchData();
      },
      onSubmit(childData){
				console.log(childData);
				const obj = childData;
						if (obj.name !== null ||obj.phone !== null || obj.name !== "" || obj.phone !== ""){
					    // 执行函数
								axios.get('http://43.136.172.73/api/v1/rider/vague', {
									params: {
										currentPage: 1,
										pageSize:100000,
										username:obj.name,
										phone:obj.phone
									},
										headers:{
											Authorization:''
										}
									})
									.then(response => {
										console.log(response);
										this.data = response.data.data;
										
										console.log(childData);
										this.$message.success('触发查询方法');
									})
									.catch(error => {
										console.error('Error:', error);
									});
							}else{
								this.$message.warning('输入数据进行查询');
							}
			
      },
			handleCustomSizeChange(val){
				console.log(val);
				this.pageSize = val;
				console.log(this.pageSize);
				const totalPage = Math.ceil(this.totalItems / this.pageSize);
				// 处理当前页超出新的总页数的情况
				if (this.currentPage > totalPage) {
				  this.currentPage = totalPage;
				}
				
			},
			handleCustomSelectChange(val){
				console.log(val);
				this.selectObj = val;
			}
    }
  }

</script>
<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
